<template>
  <div>
    <el-header>
      <div>实验室管理系统</div>

      <div>
        <span style="line-height: 50px">欢迎{{user.username}}回来</span>
        <el-dropdown>
          <div class="block">
            <el-avatar :size="50" :src="circleUrl" shape="circle"/>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>{{user.role.roleName}}</el-dropdown-item>
              <el-dropdown-item @click="handleExit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
  </div>
</template>
<script setup>
import {useUserStore} from "../../store/useUserStore.js"
import {useRouterStore} from "../../store/useRouterStore.js"
import {useRouter} from "vue-router";

const {user,changeUser}=useUserStore()
const router = useRouter()
const {isGetterRouter,changeRouter}=useRouterStore()
const circleUrl='/头像.png'
const handleExit =()=>{
  changeUser({})
  changeRouter(false)
  router.push("/login")
}

// const handleShuchu=()=>{
//   console.log("!user.role:"+!user.role+" 登录后isGetterRouter:"+isGetterRouter)
// }
</script>

<style lang="scss">
.el-header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  background-color: lightblue;
  color: white;
}
</style>